<template>
  <div class="hotelCancellation">
    <div class="hotelCancellation_top">
      <el-form ref="cancelthehotel" :model="cancelthehotel" :rules="rules" class="cancel">
        <el-form-item label="取消原因" size="mini" prop="cancelCode" style="margin: 20px 0 15px 0; display: flex">
          <el-select v-model="cancelthehotel.cancelCode" placeholder="请选择取消原因" clearable>
            <el-option value="废单">废单</el-option>
            <el-option value="酒店原因">酒店原因</el-option>
            <el-option value="公司内部原因">公司内部原因</el-option>
            <el-option value="客人不需要">客人不需要</el-option>
            <el-option value="其他">其他</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单号" size="mini" style="margin: 0 20px 0 0; display: flex">
          <span style="margin: 0 30px 0 0"> {{ cancelthehotel.orderNum }}</span>
          <span>艺龙单号：{{ cancelthehotel.eLongOrderNum }}</span>
        </el-form-item>
        <el-form-item label="支付明细" size="mini" style="margin: 20px 0 0 0; display: flex">
          <span style="margin: 0 30px 0 0">总房费： {{ cancelthehotel.totalRoomCharge }}</span>
          <span>预留款：{{ cancelthehotel.reserveMoney }}</span>
          <span style="margin: 0 0 0 30px">实际退款：{{ cancelthehotel.retreatAmount }}</span>
        </el-form-item>
        <el-form-item label="是否发送短信" size="mini" prop="resource" style="margin: 20px 0 0 0; display: flex">
          <el-radio-group v-model="cancelthehotel.resource">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="添加备注" size="mini" style="margin: 20px 0 0 0; display: flex">
          <el-input type="textarea" :rows="1" v-model="cancelthehotel.remark" style="width: 230px"></el-input>
        </el-form-item>
        <!-- <el-form-item
                label="操作说明"
                size="mini"
                style="margin: 20px 0 0 0; display: flex">
                <el-input v-model="value7" style="width: 100px"></el-input>
        </el-form-item> -->
        <el-form-item label="总退款金额" size="mini" style="margin: 20px 0 0 0; display: flex">
          <span style="margin: 0 30px 0 0">总退款金额：{{ cancelthehotel.retreatAmount }}</span>
          <span>预留款：{{ cancelthehotel.reserveMoney }}</span>
          <span style="margin: 0 0 0 30px">其他金额：{{ cancelthehotel.retreatAmount }}</span>
        </el-form-item>
        <el-form-item label="退款方式" size="mini" prop="refundway" style="margin: 20px 0 0 0; display: flex">
          <el-radio-group v-model="cancelthehotel.refundway">
            <el-radio :label="0">原路返回</el-radio>
            <el-radio :label="1">人工退款</el-radio>
            <el-radio :label="2">预留款</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="cancelthehotel.refundway == '1'" label="交易流水号" size="mini"
          style="margin: 20px 0 0 0; display: flex" prop="serialNum">
          <el-input v-model="cancelthehotel.serialNum" style="width: 100px"></el-input>
        </el-form-item>
        <el-button style="background-color: #f6b23e; color: #fff; margin: 20px 0 0 0"
          @click="submitForm('cancelthehotel')">确定</el-button>
        <el-button @click="returnback('cancelthehotel')">取消</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
  export default {
    name: "hotelCancellation",
    data() {
      return {
        cancelthehotel: {
          cancelCode: "",
          resource: false,
          refundway: 0,
          // 交易流水号
          Serialnumber: "",
          refundMethod: "",
          remark: "",
          serialNum: "",
        },
        switchs: true,
        cancelList: "",
        theguarantee: [{
            value: "其他",
            label: "其他",
          },
          {
            value: "无",
            label: "无",
          },
        ],
        rules: {
          cancelCode: [{ required: true, message: "请选择取消原因",trigger: "change" }, ],
          serialNum:  [{ required: true, message: "请输入交易流水号", trigger: "blur"}, ],
          refundway:  [{ required: true, message: "请选择退款方式", trigger: "change" }, ],
          resource:   [{ required: true, message: "请选是否发送短信",  trigger: "change" }, ],
        },
      };
    },
    methods: {
      // 查询代退票
      gethotelRetreat() {
        this.$axios
          .gethotelRetreat({
            id: String(this.cancelList),
          })
          .then((res) => {
            console.log(res);
            this.cancelthehotel = res.data;
          });
      },
      // 确认按钮
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.gethotelOrderCancel();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      // 确认接口
      gethotelOrderCancel() {
        localStorage.setItem("isToken", true);
        this.$axios
          .gethotelOrderCancel({
            orderId: this.cancelthehotel.eLongOrderNum * 1,
            // 取消原因
            cancelCode: this.cancelthehotel.cancelCode,
            // 备注
            remark: this.cancelthehotel.remark,
            // 是否发送短信
            sendMessages: this.cancelthehotel.resource,
            // orderId:1408654883
            // 退款方式
            refundMethod: this.cancelthehotel.refundway,
            // 退款金额
            refundAmount: this.cancelthehotel.retreatAmount,
            payWay: "Crm",
            // 流水号
            serialNum: this.cancelthehotel.serialNum,
          })
          .then((res) => {
            
            console.log(res);
            if (res.code == "200") {
              this.$message({
                message: "取消成功",
                type: "success",
              });
              this.$router.go(-1);
            } else {
              // this.$message.error(res.code);
            }
          }).catch(err => {
            console.log(err)
            this.$message.error(err.data.Result.msg);
          })
      },
      // 返回按钮
      returnback() {
        this.$router.go(-1);
      },
    },
    mounted() {
      this.cancelList = this.$route.params.cancelList;
      console.log(this.cancelList);
      this.gethotelRetreat();
    },
  };
</script>

<style scoped>
  .cancel {
    margin: 20px 20px;
  }

  .hotelCancellation {
    margin: 20px;
  }

  .hotelCancellation_top {
    width: 500px;
    margin: 0 auto;
  }
</style>